import*as e from"../../ui/legacy/legacy.js";import*as t from"../../core/common/common.js";import*as i from"../../core/i18n/i18n.js";import*as n from"../../core/platform/platform.js";import*as a from"../../ui/legacy/components/inline_editor/inline_editor.js";import*as r from"../../core/host/host.js";import*as o from"../../core/sdk/sdk.js";const s=new CSSStyleSheet;s.replaceSync(':host{overflow:hidden}.animation-node-row{width:100%;display:flex;border-bottom:1px dashed var(--color-details-hairline)}.animation-node-description{width:150px;padding-left:8px;overflow:hidden;position:relative;transform-style:preserve-3d;border-bottom:1px solid var(--color-details-hairline);margin-bottom:-1px;background-color:var(--color-background-elevation-1);display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;white-space:nowrap;flex:0 0 150px}.animation-node-description > *{flex:0 0 auto}.animation-timeline-row{height:32px;position:relative}path.animation-keyframe{fill-opacity:0.2}.animation-node-selected path.animation-keyframe,\nsvg.animation-ui g:first-child:hover path.animation-keyframe{fill-opacity:0.4}line.animation-line{stroke-width:2px;stroke-linecap:round;fill:none}line.animation-delay-line{stroke-width:2px;stroke-dasharray:6,4}line.animation-delay-line.animation-fill{stroke-dasharray:none}circle.animation-keyframe-point{fill:var(--color-background)}circle.animation-endpoint,\ncircle.animation-keyframe-point{stroke-width:2px;transition:transform 100ms cubic-bezier(0,0,0.2,1);transform:scale(1);transform-box:fill-box;transform-origin:50% 50%}circle.animation-endpoint:active,\ncircle.animation-keyframe-point:active{transform:scale(1)}.animation-ui circle.animation-endpoint:hover,\n.animation-ui circle.animation-keyframe-point:hover{transform:scale(1.2)}.animation-name{position:absolute;top:8px;color:var(--color-text-primary);text-align:center;margin-left:-8px;white-space:nowrap}.animation-timeline-toolbar-container{display:flex;background-color:var(--color-background-elevation-1);border-bottom:var(--legacy-divider-border);flex:0 0 auto}.animation-timeline-toolbar{display:inline-block}.animation-timeline-header{height:28px;border-bottom:1px solid var(--color-details-hairline);flex-shrink:0;display:flex}.animation-timeline-header::after{content:"";height:calc(100% - 48px - 28px);position:absolute;width:150px;left:0;margin-top:28px;background-color:var(--color-background-elevation-1);z-index:0;border-right:1px solid var(--color-details-hairline)}.animation-controls{flex:0 0 150px;position:relative;display:flex;justify-content:flex-end;padding-right:8px}.animation-timeline-current-time{flex:0 0 auto;line-height:28px;margin-right:5px}.animation-grid-header{flex:1 0 auto;cursor:text}.animation-timeline-buffer,\n.animation-timeline-buffer-hint{height:48px;flex:0 0 auto;border-bottom:1px solid var(--color-details-hairline);display:flex;padding:0 2px}.animation-timeline-buffer:empty,\n.animation-timeline-buffer-hint{display:none}.animation-timeline-buffer:empty ~ .animation-timeline-buffer-hint{align-items:center;justify-content:center;font-size:14px;z-index:101;display:flex}.animation-time-overlay{background-color:var(--color-text-primary);opacity:5%;position:absolute;height:100%;width:100%;z-index:-1}.animation-timeline-end > .animation-time-overlay{visibility:hidden}.animation-scrubber{opacity:100%;position:absolute;left:10px;height:100%;width:100%;top:28px;border-left:1px solid var(--color-red);z-index:2;cursor:col-resize}.animation-scrubber-line{width:11px;background:linear-gradient(to right,transparent 5px,var(--color-red) 5px,var(--color-red) 6px,transparent 6px);position:absolute;top:-28px;height:28px;left:-6px;padding:0 5px;z-index:3}.animation-scrubber-head{width:7px;height:7px;transform:rotate(45deg);background:var(--color-red);position:absolute;left:2px;top:1px;z-index:4}.grid-overflow-wrapper{position:absolute;left:140px;top:76px;z-index:1;overflow:hidden}svg.animation-timeline-grid{position:absolute;left:0;top:0;right:0;bottom:0}rect.animation-timeline-grid-line{fill:var(--color-background-elevation-2)}.animation-timeline-row > svg.animation-ui{position:absolute}.animation-node-timeline{flex-grow:1}.animation-node-description > div{position:absolute;top:50%;transform:translateY(-50%);max-height:100%}.animation-node-removed{filter:saturate(0);cursor:not-allowed}svg.animation-ui g:first-child{opacity:100%}svg.animation-ui circle:focus-visible,\nsvg.animation-ui path:focus-visible{outline:2px solid -webkit-focus-ring-color}.animation-tail-iterations{opacity:50%}.animation-keyframe-step line{stroke-width:2;stroke-opacity:0.3}text.animation-timeline-grid-label{font-size:10px;fill:var(--color-text-secondary);text-anchor:middle}.animation-timeline-rows,\n.animation-timeline-rows-hint{flex-grow:1;overflow-y:auto;z-index:1;overflow-x:hidden}.animation-timeline-rows-hint{display:none}.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty{flex-grow:0}.animation-timeline-buffer:not(:empty) ~ .animation-timeline-rows:empty ~ .animation-timeline-rows-hint{font-size:14px;display:flex;align-items:center;justify-content:center;margin-left:150px;padding:10px}.toolbar.animation-controls-toolbar{flex:0 0 auto}.animation-node-row.animation-node-selected{background-color:var(--color-background-hover-overlay)}.animation-node-selected > .animation-node-description{background-color:var(--color-background-elevation-2)}.animation-buffer-preview{height:40px;margin:4px 2px;background-color:var(--color-background-elevation-1);border:1px solid transparent;border-radius:2px;flex:1 1;padding:4px;max-width:100px;animation:newGroupAnim 200ms;position:relative}.animation-buffer-preview-animation{width:100%;height:100%;border-radius:2px 0 0 2px;position:absolute;top:0;left:0;background:var(--color-background-elevation-2);opacity:0%;border-right:1px solid var(--color-details-hairline)}.animation-buffer-preview:focus-visible{outline:-webkit-focus-ring-color auto 5px}.animation-buffer-preview:not(.selected):focus-visible,\n.animation-buffer-preview:not(.selected):hover{background-color:var(--color-background-elevation-2)}.animation-buffer-preview.selected{background-color:var(--legacy-selection-bg-color)}.animation-paused{align-items:center;justify-content:center;background-color:hsl(0deg 0% 70%/50%);display:none}.animation-paused::before,\n.animation-paused::after{content:"";background:var(--color-background);width:7px;height:20px;border-radius:2px;margin:2px;border:1px solid var(--color-details-hairline)}.animation-buffer-preview.paused .animation-paused{display:flex}.animation-buffer-preview > svg > line{stroke-width:1px}.animation-buffer-preview.selected > svg > line{stroke:var(--color-background)!important}@keyframes newGroupAnim{from{clip-path:polygon(0% 0%,0% 100%,0% 100%,0% 0%)}to{clip-path:polygon(0% 0%,0% 100%,100% 100%,100% 0%)}}.animation-playback-rate-control{margin:4px 0 4px 2px;display:flex;width:120px}.animation-playback-rate-button{border:1px solid var(--color-button-secondary-border);color:var(--color-text-primary);display:inline-block;margin-right:-1px;padding:1px 4px;background-color:transparent;flex:1 0 auto;text-align:center}.animation-playback-rate-button:first-child{border-radius:4px 0 0 4px}.animation-playback-rate-button:last-child{border-radius:0 4px 4px 0}.animation-playback-rate-button.selected{color:var(--color-button-primary-text);background-color:var(--color-primary-old);border-color:var(--color-primary-old);z-index:1}.animation-playback-rate-button.selected:focus-visible{color:var(--color-text-primary)}.animation-playback-rate-button:focus-visible{background-color:var(--legacy-focus-bg-color)}.animation-playback-rate-button:not(.selected):hover{background:var(--color-background-elevation-2)}.animation-remove-button{position:absolute;top:-3px;right:-3px;background:var(--color-text-secondary);border-radius:12px;height:16px;width:16px;align-items:center;font-size:10px;justify-content:center;box-shadow:0 1px 4px 0 var(--color-background-highlight);z-index:100;display:none;font-weight:700;color:var(--color-background)}.animation-remove-button:hover{background:var(--color-text-primary)}.animation-buffer-preview:hover .animation-remove-button{display:flex}@media (forced-colors: active){.animation-playback-rate-button.selected,\n  .animation-playback-rate-button.selected:first-child,\n  .animation-playback-rate-button.selected:first-child:focus-visible,\n  .animation-playback-rate-button:focus-visible{forced-color-adjust:none;color:HighlightText;background-color:Highlight}.animation-node-description:focus-visible{background-color:var(--color-background);forced-color-adjust:none}.monospace{forced-color-adjust:auto}}\n/*# sourceURL=animationTimeline.css */\n');class l extends o.SDKModel.SDKModel{runtimeModel;agent;#e;animationGroups;#t;playbackRate;#i;#n;constructor(e){super(e),this.runtimeModel=e.model(o.RuntimeModel.RuntimeModel),this.agent=e.animationAgent(),e.registerAnimationDispatcher(new b(this)),this.#e=new Map,this.animationGroups=new Map,this.#t=new Set,this.playbackRate=1;e.model(o.ResourceTreeModel.ResourceTreeModel).addEventListener(o.ResourceTreeModel.Events.PrimaryPageChanged,this.reset,this);const t=e.model(o.ScreenCaptureModel.ScreenCaptureModel);t&&(this.#i=new f(this,t))}reset(){this.#e.clear(),this.animationGroups.clear(),this.#t.clear(),this.dispatchEventToListeners(d.ModelReset)}animationCreated(e){this.#t.add(e)}animationCanceled(e){this.#t.delete(e),this.flushPendingAnimationsIfNeeded()}animationStarted(e){if(!e.source||!e.source.backendNodeId)return;const t=h.parsePayload(this,e);if(!t)return;const i=t.source().keyframesRule();"WebAnimation"===t.type()&&i&&0===i.keyframes().length?this.#t.delete(t.id()):(this.#e.set(t.id(),t),this.#t.add(t.id())),this.flushPendingAnimationsIfNeeded()}flushPendingAnimationsIfNeeded(){for(const e of this.#t)if(!this.#e.get(e))return;for(;this.#t.size;)this.matchExistingGroups(this.createGroupFromPendingAnimations())}matchExistingGroups(e){let t=null;for(const i of this.animationGroups.values())if(i.matches(e)){t=i,i.update(e);break}return t||(this.animationGroups.set(e.id(),e),this.#i&&this.#i.captureScreenshots(e.finiteDuration(),e.screenshotsInternal)),this.dispatchEventToListeners(d.AnimationGroupStarted,t||e),Boolean(t)}createGroupFromPendingAnimations(){console.assert(this.#t.size>0);const e=this.#t.values().next().value;this.#t.delete(e);const t=this.#e.get(e);if(!t)throw new Error("Unable to locate first animation");const i=[t],n=t.startTime(),a=new Set;for(const e of this.#t){const t=this.#e.get(e);t.startTime()===n?i.push(t):a.add(e)}return this.#t=a,new p(this,e,i)}setPlaybackRate(e){this.playbackRate=e,this.agent.invoke_setPlaybackRate({playbackRate:e})}releaseAnimations(e){this.agent.invoke_releaseAnimations({animations:e})}async suspendModel(){this.reset(),await this.agent.invoke_disable()}async resumeModel(){this.#n&&await this.agent.invoke_enable()}async ensureEnabled(){this.#n||(await this.agent.invoke_enable(),this.#n=!0)}}var d;!function(e){e.AnimationGroupStarted="AnimationGroupStarted",e.ModelReset="ModelReset"}(d||(d={}));class h{#a;#r;#o;#s;constructor(e,t){this.#a=e,this.#r=t,this.#o=new c(e,this.#r.source)}static parsePayload(e,t){return new h(e,t)}payload(){return this.#r}id(){return this.#r.id}name(){return this.#r.name}paused(){return this.#r.pausedState}playState(){return this.#s||this.#r.playState}setPlayState(e){this.#s=e}playbackRate(){return this.#r.playbackRate}startTime(){return this.#r.startTime}endTime(){return this.source().iterations?this.startTime()+this.source().delay()+this.source().duration()*this.source().iterations()+this.source().endDelay():1/0}finiteDuration(){const e=Math.min(this.source().iterations(),3);return this.source().delay()+this.source().duration()*e}currentTime(){return this.#r.currentTime}source(){return this.#o}type(){return this.#r.type}overlaps(e){if(!this.source().iterations()||!e.source().iterations())return!0;const t=this.startTime()<e.startTime()?this:e,i=t===this?e:this;return t.endTime()>=i.startTime()}setTiming(e,t){this.#o.node().then((i=>{if(!i)throw new Error("Unable to find node");this.updateNodeStyle(e,t,i)})),this.#o.durationInternal=e,this.#o.delayInternal=t,this.#a.agent.invoke_setTiming({animationId:this.id(),duration:e,delay:t})}updateNodeStyle(e,t,i){let n;if("CSSTransition"===this.type())n="transition-";else{if("CSSAnimation"!==this.type())return;n="animation-"}if(!i.id)throw new Error("Node has no id");const a=i.domModel().cssModel();a.setEffectivePropertyValueForNode(i.id,n+"duration",e+"ms"),a.setEffectivePropertyValueForNode(i.id,n+"delay",t+"ms")}async remoteObjectPromise(){const e=await this.#a.agent.invoke_resolveAnimation({animationId:this.id()});return e?this.#a.runtimeModel.createRemoteObject(e.remoteObject):null}cssId(){return this.#r.cssId||""}}class c{#a;#l;#d;delayInternal;durationInternal;#h;constructor(e,t){this.#a=e,this.#l=t,t.keyframesRule&&(this.#d=new m(t.keyframesRule)),this.delayInternal=this.#l.delay,this.durationInternal=this.#l.duration}delay(){return this.delayInternal}endDelay(){return this.#l.endDelay}iterationStart(){return this.#l.iterationStart}iterations(){return this.delay()||this.endDelay()||this.duration()?this.#l.iterations||1/0:0}duration(){return this.durationInternal}direction(){return this.#l.direction}fill(){return this.#l.fill}node(){return this.#h||(this.#h=new o.DOMModel.DeferredDOMNode(this.#a.target(),this.backendNodeId())),this.#h.resolvePromise()}deferredNode(){return new o.DOMModel.DeferredDOMNode(this.#a.target(),this.backendNodeId())}backendNodeId(){return this.#l.backendNodeId}keyframesRule(){return this.#d||null}easing(){return this.#l.easing}}class m{#l;#c;constructor(e){this.#l=e,this.#c=this.#l.keyframes.map((function(e){return new u(e)}))}setKeyframesPayload(e){this.#c=e.map((function(e){return new u(e)}))}name(){return this.#l.name}keyframes(){return this.#c}}class u{#l;#m;constructor(e){this.#l=e,this.#m=this.#l.offset}offset(){return this.#m}setOffset(e){this.#m=100*e+"%"}offsetAsNumber(){return parseFloat(this.#m)/100}easing(){return this.#l.easing}}class p{#a;#u;#p;#b;screenshotsInternal;#f;constructor(e,t,i){this.#a=e,this.#u=t,this.#p=i,this.#b=!1,this.screenshotsInternal=[],this.#f=[]}id(){return this.#u}animations(){return this.#p}release(){this.#a.animationGroups.delete(this.id()),this.#a.releaseAnimations(this.animationIds())}animationIds(){return this.#p.map((function(e){return e.id()}))}startTime(){return this.#p[0].startTime()}finiteDuration(){let e=0;for(let t=0;t<this.#p.length;++t)e=Math.max(e,this.#p[t].finiteDuration());return e}seekTo(e){this.#a.agent.invoke_seekAnimations({animations:this.animationIds(),currentTime:e})}paused(){return this.#b}togglePause(e){e!==this.#b&&(this.#b=e,this.#a.agent.invoke_setPaused({animations:this.animationIds(),paused:e}))}currentTimePromise(){let e=null;for(const t of this.#p)(!e||t.endTime()>e.endTime())&&(e=t);if(!e)throw new Error("No longest animation found");return this.#a.agent.invoke_getCurrentTime({id:e.id()}).then((({currentTime:e})=>e||0))}matches(e){function t(e){return"WebAnimation"===e.type()?e.type()+e.id():e.cssId()}if(this.#p.length!==e.#p.length)return!1;const i=this.#p.map(t).sort(),n=e.#p.map(t).sort();for(let e=0;e<i.length;e++)if(i[e]!==n[e])return!1;return!0}update(e){this.#a.releaseAnimations(this.animationIds()),this.#p=e.#p}screenshots(){for(let e=0;e<this.screenshotsInternal.length;++e){const t=new Image;t.src="data:image/jpeg;base64,"+this.screenshotsInternal[e],this.#f.push(t)}return this.screenshotsInternal=[],this.#f}}class b{#a;constructor(e){this.#a=e}animationCreated({id:e}){this.#a.animationCreated(e)}animationCanceled({id:e}){this.#a.animationCanceled(e)}animationStarted({animation:e}){this.#a.animationStarted(e)}}class f{#g;#y;#a;#v;#w;#x;constructor(e,t){this.#g=[],this.#y=t,this.#a=e,this.#a.addEventListener(d.ModelReset,this.stopScreencast,this)}captureScreenshots(e,t){const i=Math.min(e/this.#a.playbackRate,3e3),n=i+window.performance.now();this.#g.push({endTime:n,screenshots:t}),(!this.#w||n>this.#w)&&(clearTimeout(this.#v),this.#v=window.setTimeout(this.stopScreencast.bind(this),i),this.#w=n),this.#x||(this.#x=!0,this.#y.startScreencast("jpeg",80,void 0,300,2,this.screencastFrame.bind(this),(e=>{})))}screencastFrame(e,t){if(!this.#x)return;const i=window.performance.now();this.#g=this.#g.filter((function(e){return e.endTime>=i}));for(const t of this.#g)t.screenshots.push(e)}stopScreencast(){this.#x&&(this.#v=void 0,this.#w=void 0,this.#g=[],this.#x=!1,this.#y.stopScreencast())}}o.SDKModel.SDKModel.register(l,{capabilities:o.Target.Capability.DOM,autostart:!1});var g=Object.freeze({__proto__:null,AnimationModel:l,get Events(){return d},AnimationImpl:h,AnimationEffect:c,KeyframesRule:m,KeyframeStyle:u,AnimationGroup:p,AnimationDispatcher:b,ScreenshotCapture:f});const y=new CSSStyleSheet;y.replaceSync("img{max-height:300px;border-radius:2px}.animation-progress{position:absolute;height:2px;bottom:0;left:0;background:var(--legacy-selection-bg-color)}\n/*# sourceURL=animationScreenshotPopover.css */\n");class v extends e.Widget.VBox{#k;#M;#A;#I;#T;#S;constructor(e){super(!0),console.assert(e.length>0),this.contentElement.classList.add("animation-screenshot-popover"),this.#k=e;for(const t of e)this.contentElement.appendChild(t),t.style.display="none";this.#M=0,this.#A=0,this.#k[0].style.display="block",this.#I=this.contentElement.createChild("div","animation-progress")}wasShown(){this.#M=this.contentElement.window().requestAnimationFrame(this.changeFrame.bind(this)),this.registerCSSFiles([y])}willHide(){this.contentElement.window().cancelAnimationFrame(this.#M),this.#S=void 0}changeFrame(){if(this.#M=this.contentElement.window().requestAnimationFrame(this.changeFrame.bind(this)),this.#S)return void this.#S--;if(this.#T=!this.#T,!this.#T)return;const e=this.#k.length;this.#k[this.#A%e].style.display="none",this.#A++,this.#k[this.#A%e].style.display="block",this.#A%e==e-1&&(this.#S=50),this.#I.style.width=(this.#A%e+1)/e*100+"%"}}var w=Object.freeze({__proto__:null,AnimationScreenshotPopover:v});const x={selectAnEffectAboveToInspectAnd:"Select an effect above to inspect and modify.",clearAll:"Clear all",pauseAll:"Pause all",playbackRates:"Playback rates",playbackRatePlaceholder:"{PH1}%",pause:"Pause",setSpeedToS:"Set speed to {PH1}",animationPreviews:"Animation previews",waitingForAnimations:"Waiting for animations...",replayTimeline:"Replay timeline",resumeAll:"Resume all",playTimeline:"Play timeline",pauseTimeline:"Pause timeline",animationPreviewS:"Animation Preview {PH1}"},k=i.i18n.registerUIStrings("panels/animation/AnimationTimeline.ts",x),M=i.i18n.getLocalizedString.bind(void 0,k),A=new WeakMap,I=new WeakMap;let T;class S extends e.Widget.VBox{#C;#P;#R;#E;#B;#L;#G;#D;#U;#F;#H;#N;#O;#z;#_;#j;#K;#W;#V;#q;#X;#Q;#$;#Y;#Z;#J;#ee;#te;#ie;#ne;#ae;#re;constructor(){super(!0),this.element.classList.add("animations-timeline"),this.#C=this.contentElement.createChild("div","grid-overflow-wrapper"),this.#P=e.UIUtils.createSVGChild(this.#C,"svg","animation-timeline-grid"),this.#R=1,this.#E=!1,this.createHeader(),this.#B=this.contentElement.createChild("div","animation-timeline-rows");this.contentElement.createChild("div","animation-timeline-rows-hint").textContent=M(x.selectAnEffectAboveToInspectAnd),this.#z=100,this.#_=this.#z,this.#j=150,this.#K=new Map,this.#W=[],this.#V=[],this.#q=new Map,this.#X=new Map,o.TargetManager.TargetManager.instance().addModelListener(o.DOMModel.DOMModel,o.DOMModel.Events.NodeRemoved,this.nodeRemoved,this,{scoped:!0}),o.TargetManager.TargetManager.instance().observeModels(l,this,{scoped:!0}),e.Context.Context.instance().addFlavorChangeListener(o.DOMModel.DOMNode,this.nodeChanged,this)}static instance(e){return T&&!e?.forceNew||(T=new S),T}get previewMap(){return this.#q}get uiAnimations(){return this.#W}get groupBuffer(){return this.#V}wasShown(){for(const e of o.TargetManager.TargetManager.instance().models(l,{scoped:!0}))this.addEventListeners(e);this.registerCSSFiles([s])}willHide(){for(const e of o.TargetManager.TargetManager.instance().models(l,{scoped:!0}))this.removeEventListeners(e);this.#F&&this.#F.hidePopover()}modelAdded(e){this.isShowing()&&this.addEventListeners(e)}modelRemoved(e){this.removeEventListeners(e)}addEventListeners(e){e.ensureEnabled(),e.addEventListener(d.AnimationGroupStarted,this.animationGroupStarted,this),e.addEventListener(d.ModelReset,this.reset,this)}removeEventListeners(e){e.removeEventListener(d.AnimationGroupStarted,this.animationGroupStarted,this),e.removeEventListener(d.ModelReset,this.reset,this)}nodeChanged(){for(const e of this.#K.values())e.nodeChanged()}createScrubber(){return this.#D=document.createElement("div"),this.#D.classList.add("animation-scrubber"),this.#D.classList.add("hidden"),this.#Q=this.#D.createChild("div","animation-scrubber-line"),this.#Q.createChild("div","animation-scrubber-head"),this.#D.createChild("div","animation-time-overlay"),this.#D}createHeader(){const t=this.contentElement.createChild("div","animation-timeline-toolbar-container"),i=new e.Toolbar.Toolbar("animation-timeline-toolbar",t);this.#H=new e.Toolbar.ToolbarButton(M(x.clearAll),"clear"),this.#H.addEventListener(e.Toolbar.ToolbarButton.Events.Click,this.reset.bind(this)),i.appendToolbarItem(this.#H),i.appendSeparator(),this.#$=new e.Toolbar.ToolbarToggle(M(x.pauseAll),"pause","resume"),this.#$.addEventListener(e.Toolbar.ToolbarButton.Events.Click,this.togglePauseAll.bind(this)),i.appendToolbarItem(this.#$);const n=t.createChild("div","animation-playback-rate-control");n.addEventListener("keydown",this.handlePlaybackRateControlKeyDown.bind(this)),e.ARIAUtils.markAsListBox(n),e.ARIAUtils.setLabel(n,M(x.playbackRates)),this.#L=[];for(const t of C){const i=n.createChild("button","animation-playback-rate-button");i.textContent=t?M(x.playbackRatePlaceholder,{PH1:100*t}):M(x.pause),I.set(i,t),i.addEventListener("click",this.setPlaybackRate.bind(this,t)),e.ARIAUtils.markAsOption(i),e.Tooltip.Tooltip.install(i,M(x.setSpeedToS,{PH1:i.textContent})),i.tabIndex=-1,this.#L.push(i)}this.updatePlaybackControls(),this.#G=this.contentElement.createChild("div","animation-timeline-buffer"),e.ARIAUtils.markAsListBox(this.#G),e.ARIAUtils.setLabel(this.#G,M(x.animationPreviews)),this.#F=new e.PopoverHelper.PopoverHelper(this.#G,this.getPopoverRequest.bind(this)),this.#F.setDisableOnClick(!0),this.#F.setTimeout(0);this.contentElement.createChild("div","animation-timeline-buffer-hint").textContent=M(x.waitingForAnimations);const a=this.contentElement.createChild("div","animation-timeline-header"),r=a.createChild("div","animation-controls");this.#U=r.createChild("div","animation-timeline-current-time monospace");const o=new e.Toolbar.Toolbar("animation-controls-toolbar",r);this.#Y=new e.Toolbar.ToolbarToggle(M(x.replayTimeline),"replay"),this.#Z="replay-outline",this.#Y.setToggled(!0),this.#Y.addEventListener(e.Toolbar.ToolbarButton.Events.Click,this.controlButtonToggle.bind(this)),o.appendToolbarItem(this.#Y);const s=a.createChild("div","animation-grid-header");return e.UIUtils.installDragHandle(s,this.repositionScrubber.bind(this),this.scrubberDragMove.bind(this),this.scrubberDragEnd.bind(this),"text"),this.#C.appendChild(this.createScrubber()),this.#Q&&e.UIUtils.installDragHandle(this.#Q,this.scrubberDragStart.bind(this),this.scrubberDragMove.bind(this),this.scrubberDragEnd.bind(this),"col-resize"),this.#U.textContent="",a}handlePlaybackRateControlKeyDown(e){switch(e.key){case"ArrowLeft":case"ArrowUp":this.focusNextPlaybackRateButton(e.target,!0);break;case"ArrowRight":case"ArrowDown":this.focusNextPlaybackRateButton(e.target)}}focusNextPlaybackRateButton(e,t){const i=e,n=this.#L.indexOf(i),a=t?n-1:n+1;if(a<0||a>=this.#L.length)return;const r=this.#L[a];r.tabIndex=0,r.focus(),e&&(e.tabIndex=-1)}getPopoverRequest(e){const t=e.target;return t&&t.isDescendant(this.#G)?{box:t.boxInWindow(),show:e=>{let i;for(const[e,n]of this.#q)n.element!==t&&n.element!==t.parentElement||(i=e);if(console.assert(void 0!==i),!i)return Promise.resolve(!1);const n=i.screenshots();if(!n.length)return Promise.resolve(!1);let a;const r=new Promise((e=>{a=e}));return n[0].complete?o(n):n[0].onload=o.bind(null,n),r;function o(t){new v(t).show(e.contentElement),a(!0)}},hide:void 0}:null}togglePauseAll(){this.#E=!this.#E,this.#$&&this.#$.setToggled(this.#E),this.setPlaybackRate(this.#R),this.#$&&this.#$.setTitle(this.#E?M(x.resumeAll):M(x.pauseAll))}setPlaybackRate(e){this.#R=e;for(const e of o.TargetManager.TargetManager.instance().models(l,{scoped:!0}))e.setPlaybackRate(this.#E?0:this.#R);r.userMetrics.actionTaken(r.UserMetrics.Action.AnimationsPlaybackRateChanged),this.#ie&&(this.#ie.playbackRate=this.effectivePlaybackRate()),this.updatePlaybackControls()}updatePlaybackControls(){for(const e of this.#L){const t=this.#R===I.get(e);e.classList.toggle("selected",t),e.tabIndex=t?0:-1}}controlButtonToggle(){"play-outline"===this.#Z?this.togglePause(!1):"replay-outline"===this.#Z?this.replay():this.togglePause(!0)}updateControlButton(){this.#Y&&(this.#Y.setEnabled(Boolean(this.#N)),this.#N&&this.#N.paused()?(this.#Z="play-outline",this.#Y.setToggled(!0),this.#Y.setTitle(M(x.playTimeline)),this.#Y.setGlyph("play")):!this.#ie||!this.#ie.currentTime||"number"!=typeof this.#ie.currentTime||this.#ie.currentTime>=this.duration()?(this.#Z="replay-outline",this.#Y.setToggled(!0),this.#Y.setTitle(M(x.replayTimeline)),this.#Y.setGlyph("replay")):(this.#Z="pause-outline",this.#Y.setToggled(!1),this.#Y.setTitle(M(x.pauseTimeline)),this.#Y.setGlyph("pause")))}effectivePlaybackRate(){return this.#E||this.#N&&this.#N.paused()?0:this.#R}togglePause(e){if(this.#N){this.#N.togglePause(e);const t=this.#q.get(this.#N);t&&t.element.classList.toggle("paused",e)}this.#ie&&(this.#ie.playbackRate=this.effectivePlaybackRate()),this.updateControlButton()}replay(){this.#N&&(this.#N.seekTo(0),this.animateTime(0),this.updateControlButton())}duration(){return this.#_}setDuration(e){this.#_=e,this.scheduleRedraw()}clearTimeline(){this.#W=[],this.#K.clear(),this.#X.clear(),this.#B.removeChildren(),this.#_=this.#z,this.#D.classList.add("hidden"),this.#N=null,this.#ie&&this.#ie.cancel(),this.#ie=void 0,this.#U.textContent="",this.updateControlButton()}reset(){this.clearTimeline(),this.#E?this.togglePauseAll():this.setPlaybackRate(this.#R);for(const e of this.#V)e.release();this.#V=[],this.#q.clear(),this.#G.removeChildren(),this.#F.hidePopover(),this.renderGrid()}animationGroupStarted({data:e}){this.addAnimationGroup(e)}addAnimationGroup(t){const i=this.#q.get(t);if(i)return void(this.#N===t?this.syncScrubber():i.replay());this.#V.sort((function(e,t){return e.startTime()===t.startTime()?0:e.startTime()>t.startTime()?1:-1}));const n=[],a=this.width()/50;for(;this.#V.length>a;){const e=this.#V.splice(this.#V[0]===this.#N?1:0,1);n.push(e[0])}for(const e of n){const t=this.#q.get(e);t&&(t.element.remove(),this.#q.delete(e),e.release())}const r=new N(t);if(this.#V.push(t),this.#q.set(t,r),this.#G.appendChild(r.element),r.removeButton().addEventListener("click",this.removeAnimationGroup.bind(this,t)),r.element.addEventListener("click",this.selectAnimationGroup.bind(this,t)),r.element.addEventListener("keydown",this.handleAnimationGroupKeyDown.bind(this,t)),e.ARIAUtils.setLabel(r.element,M(x.animationPreviewS,{PH1:this.#V.indexOf(t)+1})),e.ARIAUtils.markAsOption(r.element),1===this.#q.size){const e=this.#q.get(this.#V[0]);e&&(e.element.tabIndex=0)}}handleAnimationGroupKeyDown(e,t){switch(t.key){case" ":case"Enter":this.selectAnimationGroup(e);break;case"Backspace":case"Delete":this.removeAnimationGroup(e,t);break;case"ArrowLeft":case"ArrowUp":this.focusNextGroup(e,t.target,!0);break;case"ArrowRight":case"ArrowDown":this.focusNextGroup(e,t.target)}}focusNextGroup(e,t,i){const n=this.#V.indexOf(e),a=i?n-1:n+1;if(a<0||a>=this.#V.length)return;const r=this.#q.get(this.#V[a]);r&&(r.element.tabIndex=0,r.element.focus()),t&&(t.tabIndex=-1)}removeAnimationGroup(e,t){const i=this.#V.indexOf(e);n.ArrayUtilities.removeElement(this.#V,e);const a=this.#q.get(e);a&&a.element.remove(),this.#q.delete(e),e.release(),t.consume(!0),this.#N===e&&(this.clearTimeline(),this.renderGrid());if(0===this.#V.length)return void this.#H.element.focus();const r=i>=this.#V.length?this.#q.get(this.#V[this.#V.length-1]):this.#q.get(this.#V[i]);r&&(r.element.tabIndex=0,r.element.focus())}selectAnimationGroup(e){if(this.#N===e)return this.togglePause(!1),void this.replay();this.clearTimeline(),this.#N=e,this.#q.forEach((function(e,t){e.element.classList.toggle("selected",this.#N===t)}),this),this.setDuration(Math.max(500,e.finiteDuration()+100));for(const t of e.animations())this.addAnimation(t);this.scheduleRedraw(),this.#D.classList.remove("hidden"),this.togglePause(!1),this.replay()}addAnimation(e){let t=this.#K.get(e.source().backendNodeId());t||(t=new P(e.source()),this.#B.appendChild(t.element),this.#K.set(e.source().backendNodeId(),t));const i=t.createNewRow(),n=new D(e,this,i);e.source().deferredNode().resolve(function(e){n.setNode(e),e&&t&&(t.nodeResolved(e),A.set(e,t))}.bind(this)),this.#W.push(n),this.#X.set(e.id(),e)}nodeRemoved(e){const{node:t}=e.data,i=A.get(t);i&&i.nodeRemoved()}renderGrid(){const t=(this.width()+10).toString(),n=((this.#te||0)+30).toString();let a;this.#C.style.width=t+"px",this.#C.style.height=n.toString()+"px",this.#P.setAttribute("width",t),this.#P.setAttribute("height",n.toString()),this.#P.setAttribute("shape-rendering","crispEdges"),this.#P.removeChildren();for(let t=0;t<this.duration();t+=250){const i=e.UIUtils.createSVGChild(this.#P,"rect","animation-timeline-grid-line");i.setAttribute("x",(t*this.pixelMsRatio()+10).toString()),i.setAttribute("y","23"),i.setAttribute("height","100%"),i.setAttribute("width","1")}for(let t=0;t<this.duration();t+=250){const n=t*this.pixelMsRatio();if(void 0===a||n-a>50){a=n;const r=e.UIUtils.createSVGChild(this.#P,"text","animation-timeline-grid-label");r.textContent=i.TimeUtilities.millisToString(t),r.setAttribute("x",(n+10).toString()),r.setAttribute("y","16")}}}scheduleRedraw(){this.#O=[];for(const e of this.#W)this.#O.push(e);this.#J||(this.#J=!0,this.renderGrid(),this.#B.window().requestAnimationFrame(this.render.bind(this)))}render(e){for(;this.#O.length&&(!e||window.performance.now()-e<50);){const e=this.#O.shift();e&&e.redraw()}this.#O.length?this.#B.window().requestAnimationFrame(this.render.bind(this)):this.#J=void 0}onResize(){this.#ee=Math.max(0,this.#B.offsetWidth-this.#j)||0,this.#te=this.#B.offsetHeight,this.scheduleRedraw(),this.#ie&&this.syncScrubber(),this.#ne=void 0}width(){return this.#ee||0}resizeWindow(e){let t=!1;const i=e.source().duration()*Math.min(2,e.source().iterations()),n=e.source().delay()+i+e.source().endDelay();return n>this.#_&&(t=!0,this.#_=n+200),t}syncScrubber(){this.#N&&this.#N.currentTimePromise().then(this.animateTime.bind(this)).then(this.updateControlButton.bind(this))}animateTime(e){this.#ie&&this.#ie.cancel(),this.#ie=this.#D.animate([{transform:"translateX(0px)"},{transform:"translateX("+this.width()+"px)"}],{duration:this.duration(),fill:"forwards"}),this.#ie.playbackRate=this.effectivePlaybackRate(),this.#ie.onfinish=this.updateControlButton.bind(this),this.#ie.currentTime=e,this.element.window().requestAnimationFrame(this.updateScrubber.bind(this))}pixelMsRatio(){return this.width()/this.duration()||0}updateScrubber(e){this.#ie&&(this.#U.textContent=i.TimeUtilities.millisToString(this.#oe()),"pending"===this.#ie.playState.toString()||"running"===this.#ie.playState?this.element.window().requestAnimationFrame(this.updateScrubber.bind(this)):"finished"===this.#ie.playState&&(this.#U.textContent=""))}repositionScrubber(e){if(!this.#N)return!1;this.#ne||(this.#ne=this.#P.getBoundingClientRect().left+10);const{x:t}=e,i=Math.max(0,t-this.#ne)/this.pixelMsRatio();return this.#N.seekTo(i),this.togglePause(!0),this.animateTime(i),this.#ae=i,this.#re=t,!0}scrubberDragStart(e){if(!this.#ie||!this.#N)return!1;this.#ae="number"==typeof this.#ie.currentTime?this.#ie.currentTime:null,this.#D.classList.remove("animation-timeline-end"),this.#ie.pause();const{x:t}=e;return this.#re=t,this.togglePause(!0),!0}scrubberDragMove(e){const{x:t}=e,n=t-(this.#re||0),a=Math.max(0,Math.min((this.#ae||0)+n/this.pixelMsRatio(),this.duration()));this.#ie&&(this.#ie.currentTime=a),this.#U.textContent=i.TimeUtilities.millisToString(Math.round(a)),this.#N&&this.#N.seekTo(a)}#oe(){return"number"==typeof this.#ie?.currentTime?this.#ie.currentTime:0}scrubberDragEnd(e){if(this.#ie){const e=Math.max(0,this.#oe());this.#ie.play(),this.#ie.currentTime=e}this.#U.window().requestAnimationFrame(this.updateScrubber.bind(this))}}const C=[1,.25,.1];class P{element;#se;#le;#de;constructor(t){this.element=document.createElement("div"),this.element.classList.add("animation-node-row"),this.#se=this.element.createChild("div","animation-node-description"),this.#le=this.element.createChild("div","animation-node-timeline"),e.ARIAUtils.markAsApplication(this.#le)}nodeResolved(i){i?(this.#de=i,this.nodeChanged(),t.Linkifier.Linkifier.linkify(i).then((e=>this.#se.appendChild(e))),i.ownerDocument||this.nodeRemoved()):e.UIUtils.createTextChild(this.#se,"<node>")}createNewRow(){return this.#le.createChild("div","animation-timeline-row")}nodeRemoved(){this.element.classList.add("animation-node-removed"),this.#de=null}nodeChanged(){let t=!1;this.#de&&(t=this.#de===e.Context.Context.instance().flavor(o.DOMModel.DOMNode)),this.element.classList.toggle("animation-node-selected",t)}}class R{steps;stepAtPosition;constructor(e,t){this.steps=e,this.stepAtPosition=t}static parse(e){let t=e.match(/^steps\((\d+), (start|middle)\)$/);return t?new R(parseInt(t[1],10),t[2]):(t=e.match(/^steps\((\d+)\)$/),t?new R(parseInt(t[1],10),"end"):null)}}var E=Object.freeze({__proto__:null,AnimationTimeline:S,GlobalPlaybackRates:C,NodeUI:P,StepTimingFunction:R});const B={animationEndpointSlider:"Animation Endpoint slider",animationKeyframeSlider:"Animation Keyframe slider",sSlider:"{PH1} slider"},L=i.i18n.registerUIStrings("panels/animation/AnimationUI.ts",B),G=i.i18n.getLocalizedString.bind(void 0,L);class D{#he;#ce;#me;#ue;#pe;#be;#fe;#ge;#ye;#ve;#de;#we;#xe;#ke;#Me;#Ae;#Ie;constructor(t,i,n){this.#he=t,this.#ce=i;const a=this.#he.source().keyframesRule();a&&(this.#me=a.keyframes()),this.#ue=n.createChild("div","animation-name"),this.#ue.textContent=this.#he.name(),this.#pe=e.UIUtils.createSVGChild(n,"svg","animation-ui"),this.#pe.setAttribute("height",U.AnimationSVGHeight.toString()),this.#pe.style.marginLeft="-"+U.AnimationMargin+"px",this.#pe.addEventListener("contextmenu",this.onContextMenu.bind(this)),this.#be=e.UIUtils.createSVGChild(this.#pe,"g"),e.UIUtils.installDragHandle(this.#be,this.mouseDown.bind(this,"AnimationDrag",null),this.mouseMove.bind(this),this.mouseUp.bind(this),"-webkit-grabbing","-webkit-grab"),D.installDragHandleKeyboard(this.#be,this.keydownMove.bind(this,"AnimationDrag",null)),this.#fe=[],this.#ge=0,this.#ye=50,this.#ve=D.colorForAnimation(this.#he)}static colorForAnimation(e){const t=Array.from(F.keys()),i=t[n.StringUtilities.hashCode(e.name()||e.id())%t.length],a=F.get(i);if(!a)throw new Error("Unable to locate color");return a.asString("rgb")||""}static installDragHandleKeyboard(e,t){e.addEventListener("keydown",t,!1)}animation(){return this.#he}get nameElement(){return this.#ue}get svg(){return this.#pe}setNode(e){this.#de=e}createLine(t,i){const n=e.UIUtils.createSVGChild(t,"line",i);return n.setAttribute("x1",U.AnimationMargin.toString()),n.setAttribute("y1",U.AnimationHeight.toString()),n.setAttribute("y2",U.AnimationHeight.toString()),n.style.stroke=this.#ve,n}drawAnimationLine(e,t){const i=this.#fe[e];i.animationLine||(i.animationLine=this.createLine(t,"animation-line")),i.animationLine&&i.animationLine.setAttribute("x2",(this.duration()*this.#ce.pixelMsRatio()+U.AnimationMargin).toFixed(2))}drawDelayLine(e){this.#we&&this.#xe||(this.#we=this.createLine(e,"animation-delay-line"),this.#xe=this.createLine(e,"animation-delay-line"));const t=this.#he.source().fill();this.#we.classList.toggle("animation-fill","backwards"===t||"both"===t);const i=U.AnimationMargin;this.#we.setAttribute("x1",i.toString()),this.#we.setAttribute("x2",(this.delay()*this.#ce.pixelMsRatio()+i).toFixed(2));const n="forwards"===t||"both"===t;this.#xe.classList.toggle("animation-fill",n);const a=Math.min(this.#ce.width(),(this.delay()+this.duration()*this.#he.source().iterations())*this.#ce.pixelMsRatio());this.#xe.style.transform="translateX("+a.toFixed(2)+"px)",this.#xe.setAttribute("x1",i.toString()),this.#xe.setAttribute("x2",n?(this.#ce.width()-a+i).toFixed(2):(this.#he.source().endDelay()*this.#ce.pixelMsRatio()+i).toFixed(2))}drawPoint(t,i,n,a,r){if(this.#fe[t].keyframePoints[a])return void this.#fe[t].keyframePoints[a].setAttribute("cx",n.toFixed(2));const o=e.UIUtils.createSVGChild(i,"circle",a<=0?"animation-endpoint":"animation-keyframe-point");if(o.setAttribute("cx",n.toFixed(2)),o.setAttribute("cy",U.AnimationHeight.toString()),o.style.stroke=this.#ve,o.setAttribute("r",(U.AnimationMargin/2).toString()),o.tabIndex=0,e.ARIAUtils.setLabel(o,G(a<=0?B.animationEndpointSlider:B.animationKeyframeSlider)),a<=0&&(o.style.fill=this.#ve),this.#fe[t].keyframePoints[a]=o,!r)return;let s;s=0===a?"StartEndpointMove":-1===a?"FinishEndpointMove":"KeyframeMove",e.UIUtils.installDragHandle(o,this.mouseDown.bind(this,s,a),this.mouseMove.bind(this),this.mouseUp.bind(this),"ew-resize"),D.installDragHandleKeyboard(o,this.keydownMove.bind(this,s,a))}renderKeyframe(t,i,n,r,o,s){function l(t,i,n){const a=e.UIUtils.createSVGChild(t,"line");a.setAttribute("x1",i.toString()),a.setAttribute("x2",i.toString()),a.setAttribute("y1",U.AnimationMargin.toString()),a.setAttribute("y2",U.AnimationHeight.toString()),a.style.stroke=n}const d=e.Geometry.CubicBezier.parse(s),h=this.#fe[t].keyframeRender;if(!h[i]){const t=d?e.UIUtils.createSVGChild(n,"path","animation-keyframe"):e.UIUtils.createSVGChild(n,"g","animation-keyframe-step");h[i]=t}const c=h[i];if(c.tabIndex=0,e.ARIAUtils.setLabel(c,G(B.sSlider,{PH1:this.#he.name()})),c.style.transform="translateX("+r.toFixed(2)+"px)","linear"===s){c.style.fill=this.#ve;const e=a.BezierUI.Height;c.setAttribute("d",["M",0,e,"L",0,5,"L",o.toFixed(2),5,"L",o.toFixed(2),e,"Z"].join(" "))}else if(d)c.style.fill=this.#ve,a.BezierUI.BezierUI.drawVelocityChart(d,c,o);else{const e=R.parse(s);c.removeChildren();const t={start:0,middle:.5,end:1};if(e){const i=t[e.stepAtPosition];for(let t=0;t<e.steps;t++)l(c,(t+i)*o/e.steps,this.#ve)}}}redraw(){const t=this.#ce.width()-U.AnimationMargin;if(this.#pe.setAttribute("width",(t+2*U.AnimationMargin).toFixed(2)),this.#be.style.transform="translateX("+(this.delay()*this.#ce.pixelMsRatio()).toFixed(2)+"px)",this.#ue.style.transform="translateX("+(this.delay()*this.#ce.pixelMsRatio()+U.AnimationMargin).toFixed(2)+"px)",this.#ue.style.width=(this.duration()*this.#ce.pixelMsRatio()).toFixed(2)+"px",this.drawDelayLine(this.#pe),"CSSTransition"===this.#he.type())return void this.renderTransition();this.renderIteration(this.#be,0),this.#ke||(this.#ke=e.UIUtils.createSVGChild(this.#be,"g","animation-tail-iterations"));const i=this.duration()*this.#ce.pixelMsRatio();let n;for(n=1;n<this.#he.source().iterations()&&i*(n-1)<this.#ce.width()&&(i>0||this.#he.source().iterations()!==1/0);n++)this.renderIteration(this.#ke,n);for(;n<this.#fe.length;){const e=this.#fe.pop();e&&e.group&&e.group.remove()}}renderTransition(){const e=this.#be;this.#fe[0]||(this.#fe[0]={animationLine:null,keyframePoints:{},keyframeRender:{},group:null}),this.drawAnimationLine(0,e),this.renderKeyframe(0,0,e,U.AnimationMargin,this.duration()*this.#ce.pixelMsRatio(),this.#he.source().easing()),this.drawPoint(0,e,U.AnimationMargin,0,!0),this.drawPoint(0,e,this.duration()*this.#ce.pixelMsRatio()+U.AnimationMargin,-1,!0)}renderIteration(t,i){this.#fe[i]||(this.#fe[i]={animationLine:null,keyframePoints:{},keyframeRender:{},group:e.UIUtils.createSVGChild(t,"g")});const n=this.#fe[i].group;if(n){if(n.style.transform="translateX("+(i*this.duration()*this.#ce.pixelMsRatio()).toFixed(2)+"px)",this.drawAnimationLine(i,n),this.#me&&this.#me.length>1)for(let e=0;e<this.#me.length-1;e++){const t=this.offset(e)*this.duration()*this.#ce.pixelMsRatio()+U.AnimationMargin,a=this.duration()*(this.offset(e+1)-this.offset(e))*this.#ce.pixelMsRatio();this.renderKeyframe(i,e,n,t,a,this.#me[e].easing()),(e||!e&&0===i)&&this.drawPoint(i,n,t,e,0===i)}this.drawPoint(i,n,this.duration()*this.#ce.pixelMsRatio()+U.AnimationMargin,-1,0===i)}}delay(){let e=this.#he.source().delay();return"AnimationDrag"!==this.#Me&&"StartEndpointMove"!==this.#Me||(e+=this.#ge),Math.max(0,e)}duration(){let e=this.#he.source().duration();return"FinishEndpointMove"===this.#Me?e+=this.#ge:"StartEndpointMove"===this.#Me&&(e-=Math.max(this.#ge,-this.#he.source().delay())),Math.max(0,e)}offset(e){if(!this.#me)throw new Error("Unable to calculate offset; keyframes do not exist");let t=this.#me[e].offsetAsNumber();return"KeyframeMove"===this.#Me&&e===this.#Ae&&(console.assert(e>0&&e<this.#me.length-1,"First and last keyframe cannot be moved"),t+=this.#ge/this.#he.source().duration(),t=Math.max(t,this.#me[e-1].offsetAsNumber()),t=Math.min(t,this.#me[e+1].offsetAsNumber())),t}mouseDown(e,i,n){const a=n;return 2!==a.buttons&&(!this.#pe.enclosingNodeOrSelfWithClass("animation-node-removed")&&(this.#Me=e,this.#Ae=i,this.#Ie=a.clientX,n.consume(!0),this.#de&&t.Revealer.reveal(this.#de),!0))}mouseMove(e){const t=e;this.setMovementAndRedraw((t.clientX-(this.#Ie||0))/this.#ce.pixelMsRatio())}setMovementAndRedraw(e){this.#ge=e,this.delay()+this.duration()>.8*this.#ce.duration()&&this.#ce.setDuration(1.2*this.#ce.duration()),this.redraw()}mouseUp(e){const t=e;this.#ge=(t.clientX-(this.#Ie||0))/this.#ce.pixelMsRatio(),"KeyframeMove"===this.#Me?this.#me&&null!==this.#Ae&&void 0!==this.#Ae&&this.#me[this.#Ae].setOffset(this.offset(this.#Ae)):this.#he.setTiming(this.duration(),this.delay()),this.#ge=0,this.redraw(),this.#Me=void 0,this.#Ie=void 0,this.#Ae=void 0}keydownMove(e,t,i){const n=i;switch(this.#Me=e,this.#Ae=t,n.key){case"ArrowLeft":case"ArrowUp":this.#ge=-this.#ye;break;case"ArrowRight":case"ArrowDown":this.#ge=this.#ye;break;default:return}"KeyframeMove"===this.#Me?this.#me&&null!==this.#Ae&&this.#me[this.#Ae].setOffset(this.offset(this.#Ae)):this.#he.setTiming(this.duration(),this.delay()),this.setMovementAndRedraw(0),this.#Me=void 0,this.#Ae=void 0,i.consume(!0)}onContextMenu(t){this.#he.remoteObjectPromise().then((function(i){if(!i)return;const n=new e.ContextMenu.ContextMenu(t);n.appendApplicableItems(i),n.show()})),t.consume(!0)}}const U={AnimationHeight:26,AnimationSVGHeight:50,AnimationMargin:7,EndpointsClickRegionSize:10,GridCanvasHeight:40},F=new Map([["Purple",t.Color.parse("#9C27B0")],["Light Blue",t.Color.parse("#03A9F4")],["Deep Orange",t.Color.parse("#FF5722")],["Blue",t.Color.parse("#5677FC")],["Lime",t.Color.parse("#CDDC39")],["Blue Grey",t.Color.parse("#607D8B")],["Pink",t.Color.parse("#E91E63")],["Green",t.Color.parse("#0F9D58")],["Brown",t.Color.parse("#795548")],["Cyan",t.Color.parse("#00BCD4")]]);var H=Object.freeze({__proto__:null,AnimationUI:D,Options:U,Colors:F});class N{#Te;element;#Se;#Ce;#pe;#Pe;constructor(t){this.#Te=t,this.element=document.createElement("div"),this.element.classList.add("animation-buffer-preview"),this.element.createChild("div","animation-paused fill"),this.#Se=this.element.createChild("div","animation-remove-button"),this.#Se.textContent="✕",this.#Ce=this.element.createChild("div","animation-buffer-preview-animation"),this.#pe=e.UIUtils.createSVGChild(this.element,"svg"),this.#pe.setAttribute("width","100%"),this.#pe.setAttribute("preserveAspectRatio","none"),this.#pe.setAttribute("height","100%"),this.#Pe=32,this.#pe.setAttribute("viewBox","0 0 100 "+this.#Pe),this.#pe.setAttribute("shape-rendering","crispEdges"),this.render()}groupDuration(){let e=0;for(const t of this.#Te.animations()){const i=t.source().delay()+t.source().duration();i>e&&(e=i)}return e}removeButton(){return this.#Se}replay(){this.#Ce.animate([{offset:0,width:"0%",opacity:1},{offset:.9,width:"100%",opacity:1},{offset:1,width:"100%",opacity:0}],{duration:200,easing:"cubic-bezier(0, 0, 0.2, 1)"})}render(){this.#pe.removeChildren();const t=Math.min(this.#Te.animations().length,10),i=100/Math.max(this.groupDuration(),750);for(let n=0;n<t;n++){const a=this.#Te.animations()[n].source(),r=e.UIUtils.createSVGChild(this.#pe,"line");r.setAttribute("x1",String(a.delay()*i)),r.setAttribute("x2",String((a.delay()+a.duration())*i));const o=String(Math.floor(this.#Pe/Math.max(6,t)*n+1));r.setAttribute("y1",o),r.setAttribute("y2",o),r.style.stroke=D.colorForAnimation(this.#Te.animations()[n])}}}var O=Object.freeze({__proto__:null,AnimationGroupPreviewUI:N});export{O as AnimationGroupPreviewUI,g as AnimationModel,w as AnimationScreenshotPopover,E as AnimationTimeline,H as AnimationUI};
